<template>
    <div class="btg">
        <div class="tops">
            <div>
                <span>男女比例</span>
                <p class="bot"></p>
            </div>
        </div>
        <div class="center">
            <p class="nan">
                <span class="text">男士</span>
                <span class="ns"></span>
            </p>
            <p class="nv">
                <span class="text">女士</span>
                <span class="ns"></span>
            </p>
        </div>
        <div class="text">
            <span>男士60%</span>
            <span>女士40%</span>
        </div>
        <div class="bot" ref="bot"></div>
    </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import 'echarts-liquidfill'
import { ref, onMounted } from 'vue'
let bot = ref()

onMounted(() => {
    let botEchars = echarts.init(bot.value)
    botEchars.setOption({
        title: {
            text: '男女比例',
            textStyle:{
                color:'#5470C6'
            },
            left:'40%'

        },
        xAxis: {
            show:false,
            // type: 'category'
        },
        yAxis: {
            show:false,
            type:'category'
        },
        series: [
            {
            type: 'bar',
            data: [60],
            barWidth:15,
            z:'100',
            itemStyle:{
                color:'#007AFD',
                top:'100%',
                borderRadius:20
            }
        }, 
        {
            type: 'bar',
            data: [100],
            barGap:'-100%',
            barWidth:15,
            itemStyle:{
                color:'#FE4B79',
                borderRadius:20

            }
        }
    ]
    })
})
</script>

<style scoped lang="scss">
.btg {
    height: 28%;
    background: url(../../images/dataScreen-main-lc.png) no-repeat;
    background-size: cover;

    .tops {
        margin-top: 0;
        height: 50px;
        width: 100%;
        height: 32%;

        div {
            font-size: 20px;
            width: 60%;
            margin-left: 10px;
            margin-top: -10px;
            
            .bot {
                margin-top: 10px;
                height: 5px;
                background: url(../../images/dataScreen-title.png) no-repeat;

            }
        }

    }

    .center {
        width: 100%;
        height: 45%;
        // background: red;
        display: flex;
        width: 55%;
        margin: 0 auto;
        justify-content: space-between;

        .nan {
            background: url(../../images/man-bg.png) no-repeat;
            background-size: cover;
            width: 95px;
            height: 100px;

            // background: red;
            .text {
                font-size: 12px;
                width: 100%;
                display: flex;
                align-content: center;
                justify-content: center;
            }

            .ns {
                display: flex;
                margin: 10px auto;
                width: 60%;
                height: 60%;
                background: url(../../images/man.png) no-repeat;
                background-size: 100% 100%;
            }
        }

        .nv {
            background: url(../../images/woman-bg.png) no-repeat;
            background-size: cover;
            width: 95px;
            height: 100px;

            // background: red;
            .text {
                font-size: 12px;
                width: 100%;
                display: flex;
                align-content: center;
                justify-content: center;
            }

            .ns {
                display: flex;
                margin: 10px auto;
                width: 60%;
                height: 60%;
                background: url(../../images/woman.png) no-repeat;
                background-size: 100% 100%;
            }
        }
    }
    .text{
                display: flex;
                width: 80%;
                height: 20px;
                margin: 0 auto;
                justify-content: space-between;
                font-size: 12px;
            }
    .bot {
        width: 100%;
        height: 25%;


    }
}
</style>